//导入node.js中专门操作路径的模块
const path = require('path')

//1. 导入HTML插件，得到插件的构造函数，对象首字母大写表示
const HtmlPlugin = require('html-webpack-plugin')

//2. 创建HTML插件的实例对象，常量首字母小写
const htmlPlugin = new HtmlPlugin({
    template: './src/index.html', //指定复制的目标文件存放路径
    filename: './index.html', // 指定生成文件存放路径
})

//使用node.js中的语法，向外到处一个webpack的配置对象
module.exports = {
    //代表webpack运行模式，可选值有development（开发） 和 production（上线）
    mode: 'development',
    //打包入口文件的路径
    entry: path.join(__dirname, './src/index.js'),
    output: {
        path: path.join(__dirname, './dist'),
        filename: 'bundle.js' //生成文件的名称
    },
    plugins: [htmlPlugin], //3. 通过plugins节点，使htmlPlugin插件生效
    devServer: {
        open: true, // 初次打包完成后，自动打开浏览器
        host: '127.0.0.1', //实时打包所使用的主机地址
        port: 80, //实时打包所使用的端口号
    },
    module: { //所有第三方文件模块的匹配规则
        rules: [ //文件后缀名的匹配规则
            //定义了不同模块的loader, 如果需要调用的loader只有一个，则只传递一个字段串也行，如果有多个loader，则必须指定为数组
            //处理.css文件的loader
            {test: /\.css$/, use: ['style-loader', 'css-loader']},
            //处理.less文件的loader
            {test : /\.less/, use: ['style-loader','css-loader', 'less-loader']},
            //处理.jpg|png|gif图片文件的loader， 参数limit指定图片的大小，只有<=limit 的图片才会被转为base64格式的图片
            {test : /\.jpg|png|gif$/, use: 'url-loader?limit=22229'}
        ]
    }
}
